<template>
    <div class="houseA">
        <div class="header-title">
            <span @click="$router.push({name:'home'})" class="mint-toast-icon mintui mintui-back"></span>
            <span v-show="accountType == 'house'?true:false">房产账户</span>
            <span v-show="accountType == 'faBin'?true:false">法币账户</span>
            <span></span>
        </div>
        <div class="house-msg">
            <p>总资产账户折合 (USDT)</p>
            <p>
                0.00000000
                <span>≈0.00CNY</span>
            </p>
            <div>
                <div @click="$router.push({name:'accountSelect',query:{type:'1'}})">
                    <img src="../../assets/img/chongbiw.png" alt />
                    <span>充币</span>
                </div>
                <span>|</span>
                <div @click="$router.push({name:'accountSelect',query:{type:'2'}})">
                    <img src="../../assets/img/tibiw.png" alt />
                    <span>提币</span>
                </div>
            </div>
        </div>
        <div class="house-search">
            <div>
                <span class="fa fa-search"></span>
                <input type="text" placeholder="请搜索币种" />
            </div>
        </div>
        <!-- 币种列表 -->
        <div style="height:60vh;overflow:scroll">
            <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :autoFill="false"
                ref="loadmore"
            >
                <div @click="$router.push({name:'accountDetail'})" class="list-detail">
                    <p>
                        <span>USDT</span>
                        <span class="fa fa-angle-right"></span>
                    </p>
                    <div>
                        <div>
                            <p>可用</p>
                            <p>0.00000000</p>
                        </div>
                        <div>
                            <p>冻结</p>
                            <p>0.00000000</p>
                        </div>
                        <div>
                            <p>锁仓</p>
                            <p>0.00000000</p>
                        </div>
                        <div>
                            <p>折合（CNY）</p>
                            <p>0.00000000</p>
                        </div>
                    </div>
                </div>
            </mt-loadmore>
        </div>

        <!-- 暂无收益明细 -->
        <div class="no-earning" v-show="false">
            <img src="../../assets/img/zichan.png" alt />
            <p>暂无资产</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //加载
            allLoaded: false, //数据是否加载完毕
            pageNum: 0,
            //账户类型
            accountType:this.$route.query.accountType
        };
    },
    watch:{
        '$route'(to,from){
            this.accountType=this.$route.query.accountType
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        //下拉刷新
        loadTop() {
            // 加载更多数据
            setTimeout(() => {
                this.$refs.loadmore.onTopLoaded();
            }, 1000);
        },
        //上拉加载
        loadBottom() {
            this.pageNum++;
            setTimeout(() => {
                this.$refs.loadmore.onBottomLoaded();
            }, 1000);
        }
    }
};
</script>
<style lang="less" scoped>
.header-title {
    background-color: @blueColor10;
    color: @white;
}
.house-msg {
    background-color: @blueColor10;
    padding: 15px;
    p:nth-child(1) {
        font-size: 12px;
        color: #bde4ff;
        padding-bottom: 10px;
    }
    p:nth-child(2) {
        font-size: 18px;
        color: #fff;
        padding-bottom: 10px;
        border-bottom: 1px solid @blueColor6;
        span {
            font-size: 11px;
            color: #bde4ff;
        }
    }
    > div:nth-child(3) {
        .flexBetweenCenter();
        font-size: 14px;
        color: #fff;
        padding: 15px 0 0;
        img {
            width: 18px;
            margin-right: 10px;
        }
        > span {
            color: @blueColor6;
        }
        > div {
            width: 45%;
            .flexCenterCenter();
        }
    }
}
.house-search {
    background-color: #f7f7fb;
    padding: 10px 15px;
    > div {
        background-color: #fff;
        font-size: 12px;
        color: @blackColor5;
        padding: 8px 15px;
        border-radius: 4px;
        .flexStartCenter();
        input {
            font-size: 12px;
            color: @blackColor5;
            border: none;
        }
    }
}
.house-list {
    margin-top: 230px;
    padding: 15px;
}

.list-detail {
    padding: 10px 15px;
    border-bottom: 1px solid @blackColor3;
    p {
        .flexBetweenCenter();
        font-size: 14px;
        color: @blueColor10;
        span:nth-child(2) {
            font-size: 16px;
            color: @blackColor5;
        }
    }
    > div {
        .flexBetween();
        p:nth-child(1) {
            font-size: 11px;
            color: @blackColor5;
            padding: 5px 0 0;
        }
        p:nth-child(2) {
            font-size: 12px;
            color: @blackColor8;
        }
    }
}

</style>
